### Схемы работы и взаимодействия компонентов в Chrome Extensions

<details>
  <summary markdown="span">Схема доступа компонентов скриптов к внутреннему содержимому веб-страницы</summary>
  ![Схема 1](/images/component_schema.png)
</details>

<details>
  <summary markdown="span">Общая схема пересылки сообщений между компонентами расширения</summary>
  ![Схема 2](/images/all_message_diagram.png)
</details>

<details>
  <summary markdown="span">Диаграмма отправки сообщений и получения сообщений между компонентами</summary>
  ![Схема 3](/images/components_to_components.png)
</details>

<details>
  <summary markdown="span">Диаграмма отправки сообщений от компонентов расширения к контекстному скрипту</summary>
  ![Схема 4](/images/components_to_content_script.png)
</details>

<details>
  <summary markdown="span">Диаграмма отправки сообщений от контекстного скрипта к компонентам расширения</summary>
  ![Схема 5](/images/content_script_to_components.png)
  
  Примечание: т.к. цифра 1 не отрисована на схеме - начало запроса от content_script.js
</details>

<details>
  <summary markdown="span">Импорт классов, методов и переменных в компонентах расширения из отдельного файла</summary>
  ![Схема 6](/images/import_modules.png)
</details>

### Структура папок проекта

```
├─ images/   // Папка с изображениями *.png
├─ svg/      // Папка с изображениями *.svg для поиска по содержимому
└─ md/       // Исходный код схем для PlantUML
```

Диаграммы созданы с помощью [PlantUML](https://www.plantuml.com/).